<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>分支结构-IF</title>
</head>
<body>
    <div id="app">
        <h1>分支结构测试</h1>
        请输入分数: <input type="text" v-model="score" />
        <!-- 
            判断原则: 如果判断为true 则展现标签
         -->
         <p v-if="score > 100">优秀过头了吧！！</p>
         <p v-else-if="score >= 90">优秀</p>
         <p v-else-if="score >= 80">良好</p>
         <p v-else-if="score >= 70">中等</p>
         <p v-else-if="score >= 0">再接再厉</p>
         <p v-else>你还没有输入分数</p>
        <!-- 
            用户输入考试成绩,自动获取评级.
             >=90    优秀
             >=80    良好
             >=70    中等
             低于70  再接再厉
         -->
    </div>
    
    <script src="../js/vue.js"></script>
    <script>
        const app = new Vue({
            el: "#app",
            data: {
                score: 'null'
            },
            methods:{
            }
        })
    </script>
</body>
</html>